<template>
  <div class="benefit-info">
      <div class="container">
        <div class="benefit-info-title text-overflow">无卡分润信息</div>
          <!-- 查询方式 -->
          <div class="filter-box">
            <!-- 手机号查询 -->
          <div class="filter-by-phone filter-cell">
            <el-input class="filter-input" v-model="filters.phone" placeholder="手机号码查询"></el-input>
          </div>
          <!-- 订单号查询 -->
          <div class="filter-by-order filter-cell">
            <el-input class="filter-input" v-model="filters.requestNo" placeholder="订单号查询查询"></el-input>
          </div>
          <!-- 开始时间 -->
          <div class="filter-by-startDate filter-cell">
            <el-date-picker
            style="width:150px"
              v-model="filters.startTime"
              type="date"
              placeholder="选择开始时间"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </div>
          <!-- 结束时间 -->
          <div class="filter-by-endDate filter-cell">
            <el-date-picker
            style="width:150px"
              v-model="filters.endTime"
              type="date"
              placeholder="选择截止时间"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </div>
          <div class="filter-by-none">
             <el-button @click="handleQueryByStatus(0)">查询</el-button>
          </div>
        </div>
        <div class="benefit-info-list" v-loading="loading" >
            <div class="benefit-list" >
                <el-table :data="benefit_list" style="width: 100%">
                  <el-table-column
                    type="index"
                    width="50">
                  </el-table-column>
                  <el-table-column
                    v-for="cell in benefit_list_header"
                    :key="cell.prop"
                    :prop="cell.prop"
                    :label="cell.label"
                    :formatter="formatterList"
                  ></el-table-column>
                  <!-- <el-table-column
                    fixed="right"
                    label="操作"
                    width="80">
                    <template slot-scope="scope">
                      <el-button type="text" size="small">操作</el-button>
                    </template>
                  </el-table-column> -->
                </el-table>
            </div>
             <div class="pages-control">
                  <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="pages.currentPage"
                    :page-size="pages.page_size"
                    layout="prev, pager, next, jumper"
                    :total="pages.total">
                  </el-pagination>
             </div>
             <div>
               <el-button  download="我是被导出的表格.xls" @click="downloadTable">下载表格</el-button>
             </div>
        </div>

      </div>
  </div>
</template>

<script>
import USB from "@/utils/USB.js"; // 获取url
export default {
  name: "benefit-info",
  data() {
    return {
      loading: false,
      filters: {
        phone: '',
        requestNo:'',
        // channelTag:'',
        startTime:'',
        endTime:''
      },
      benefit_list: [],
      benefit_list_header: [
        { prop: "requestNo", label: "订单号" },
        { prop: "merchantNo", label: "商户号" },
        { prop: "inAmount", label: "交易金额" },
        { prop: "brandUserPhone", label: "贴牌商手机号" },
        { prop: "preUserPhone", label: "推荐人" },
        { prop: "gradeAmount", label: "推荐人得到分润" },
        { prop: "brandAmount", label: "贴牌商得到分润" },
        { prop: "payType", label: "交易入口" },
        { prop: "channelTag", label: "通道编码" },
        { prop: "createTime", label: "创建时间" },
      ],
      pages: {
        total: 10,
        page_size: 20,
        currentPage: 1
      }
    };
  },
  components: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      this.handleQueryByStatus(0);
    },
    filterList(type) {
      this.loading = true;
      let params =
        type && this.filters[type]
          ? `page=0&size=${this.pages.page_size}&${type}=${this.filters[type]}`
          : `page=0&size=${this.pages.page_size}`;
      this.$Http
        .post(USB.U64, params)
        .then(res => {
          this.loading = false;
          if (res.data.resp_code === "000000") {
            this.pages.total = res.data.result.totalElements;
            this.benefit_list = res.data.result.content;
          } else {
            this.$notify.info({
              title: "提示",
              message: res.data.resp_message
            });
          }
        })
        .catch(err => {
          this.$notify.error({
            title: "错误",
            message: "获取分润信息失败！"
          });
        });
    },
    handleQueryByStatus(page=0){
      let url = `paymentchannel/freeQuickPay/noCardRebatePage?page=${page}&size=${this.pages.page_size}`
      for(let key in this.filters){
        if(!!this.filters[key]){
          url+=`&${key}=${this.filters[key]}`
        }
      }
      this.$Http.get(url).then(res=>{
        if(res.data.resp_code === '000000'){
          this.benefit_list = res.data.result.content;
          this.pages.total = res.data.result.totalElements;
        }else{
          this.$message.warning(res.data.resp_message);
        }
      }).catch(err=>{
        this.$message.error("服务器繁忙！请稍后再试！")
      })

    },
    handleCurrentChange(value) {
      this.handleQueryByStatus(value-1)
    },
    formatterList(row, column, cellValue, index) {
      //  格式化信息
      
      if(column.property === "payType"){
        return cellValue == 1 ? '在线收款' : cellValue == 2 ? '代还' :  cellValue;
      } else if(column.property === "payStatus"){
        return cellValue == 0 ? '待交易': cellValue == 1 ? '成功': cellValue == 2 ? '失败': cellValue == 3 ? '异常': cellValue == 4 ? '交易中': cellValue;
      } else if(column.property === "createTime"){
        return new Date(cellValue).toLocaleDateString();
      } else {
          return cellValue===null?'--':cellValue;
      }
    },
    downloadTable() {}
  }
};
</script>
<style scoped>
.benefit-info {
  box-sizing: border-box;
  padding: 20px;
}
.benefit-info-title {
  height: 50px;
  line-height: 50px;
  font-size: 26px;
  color: #409eff;
  padding: 5px 20px;
  border-bottom: 1px solid #ededed;
}
.container {
  border: 1px solid #ededed;
}
.filter-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 15px;
  flex-wrap: nowrap;
  overflow: hidden;
  border-bottom: 1px solid #ededed;
}
.benefit-list {
  min-height: 300px;
  position: relative;
}
.pages-control {
  border-top: 1px solid #ededed;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.no-data {
  min-height: 300px;
  text-align: center;
  line-height: 200px;
}

table {
  background-color: #fff;
  width: 100%;
  font-size: 12px;
  min-width: 900px;
}
th {
  position: relative;
  word-wrap: normal;
  text-overflow: ellipsis;
  vertical-align: middle;
  border-bottom: 1px solid #ebeef5;
}
thead {
  padding: 8px 0;
  color: #909399;
}
tr {
  padding: 8px 0;
}
tr:hover {
  background-color: #f5f7fa;
}
td {
  border: none;
  border-bottom: 1px solid #ebeef5;
}
.table-cell {
  white-space: normal;
  word-break: break-all;
  line-height: 22px;
  padding: 10px 10px;
  text-align: center;
  min-width: 40px;
  box-sizing: border-box;
}
.index-cell {
  min-width: 50px;
}
</style>